<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-content">
				<uni-icons class="back-icon" type="back" size="20" @click="goBack" />
				<text class="title">校园防火安全公告</text>
			</view>
		</view>
		
		<!-- 公告内容区 -->
		<view class="notice-content">
			<view class="notice-card">
				<view class="notice-title">校园防火安全公告</view>
				<view class="notice-meta">
					<text class="notice-time">公告日期：2025-07-15</text>
					<text class="notice-publisher">发布单位：[哈尔滨信息工程学院]</text>
				</view>
				<view class="notice-body">
					<view class="notice-section">
						<text class="section-title">近期，天气持续炎热，气温不断攀升，火灾风险也随之增加。为切实保障全校师生的生命财产安全，维护校园的正常秩序，现就加强校园防火安全相关事宜公告如下：</text>
					</view>
					<view class="notice-section">
						<text class="section-subtitle">一、增强防火安全意识，严禁违规用电</text>
						<text class="section-content">
							全体师生务必增强防火安全意识，时刻保持警惕，杜绝侥幸心理。在日常工作、学习和生活中，要严格遵守学校的各项规章制度，<text class="highlight">严禁在校园内违规使用电器</text>。如未经批准私自使用大功率电器、在宿舍内乱拉电线、使用明火等行为，一经发现，将严格按照学校相关规定进行严肃处理。
						</text>
					</view>
					<view class="notice-section">
						<text class="section-subtitle">二、加强防火安全教育，普及逃生技能</text>
						<text class="section-content">
							各部门、各班级要加强对师生的防火安全教育，普及防火知识和逃生技能，提高师生的自我防范能力。各班级要组织召开防火安全主题班会，通过案例分析、实地演练等形式，让师生深刻认识到防火安全的重要性，掌握正确的防火方法和应急处置措施。
						</text>
					</view>
					<view class="notice-section">
						<text class="section-subtitle">三、加强消防设施检查维护</text>
						<text class="section-content">
							学校将加强对校园内消防设施设备的检查维护工作。后勤部门要组织专业人员对消防栓、灭火器、应急照明、疏散指示标志等消防设施进行全面检查，确保其处于正常工作状态。如发现设施设备存在损坏、缺失等问题，要及时进行维修和补充，确保在紧急情况下能够正常使用。
						</text>
					</view>
					<view class="notice-section">
						<text class="section-subtitle">四、积极配合防火工作，及时报告隐患</text>
						<text class="section-content">
							全体师生要积极配合学校的防火安全工作，共同营造安全、和谐的校园环境。如发现校园内存在火灾隐患或违规使用电器等行为，要及时向学校相关部门报告，以便及时处理，消除隐患。
						</text>
					</view>
					<view class="notice-section">
						<text class="section-content">
							<text class="highlight">防火安全，人人有责。希望全体师生高度重视，严格遵守相关规定，共同守护我们的校园安全。让我们携手努力，为创建平安校园贡献力量！</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const goBack = () => {
		// @ts-ignore
		window.uni ? window.uni.navigateBack() : uni.navigateBack();
	};
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F8F8F8;
	}
	
	.header {
		background: linear-gradient(135deg, #2B6CB0, #63B3ED);
	}
	
	.header-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
	}
	
	.back-icon {
		width: 40rpx;
		height: 40rpx;
		color: #FFFFFF;
	}
	
	.title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.notice-content {
		flex: 1;
		padding: 24rpx;
	}
	
	.notice-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}
	
	.notice-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2B6CB0;
		line-height: 1.4;
		margin-bottom: 16rpx;
	}
	
	.notice-meta {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
		margin-bottom: 24rpx;
	}
	
	.notice-body {
		margin-bottom: 32rpx;
	}
	
	.notice-section {
		margin-bottom: 18rpx;
	}
	
	.section-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
	}
	
	.section-subtitle {
		font-size: 26rpx;
		color: #2B6CB0;
		font-weight: bold;
		margin-bottom: 4rpx;
		display: block;
	}
	
	.section-content {
		font-size: 26rpx;
		color: #333;
		line-height: 1.7;
		display: block;
	}
	
	.highlight {
		color: #FF4D4F;
		font-weight: bold;
	}
</style>